<script setup lang="ts">
import { areaList } from '@vant/area-data';
import { onMounted, reactive, toRefs } from 'vue';
import {doctorService} from "../api/zxzx"
import {useRouter} from "vue-router";
onMounted(()=>{
    getDoctors(state.area,state.buwei)
})
const getDoctors = async (area:string,buwei:string) => {
  const response = await doctorService.getDoctors(area,buwei)
  state.doctorList=response.data;   
}
const router = useRouter();
const state = reactive({
    //搜索的值
    searchValue: "",
    //地區
    area: "全国",
    //地址彈出窗狀態
    areaShowButtonStatus: false,
    //部位
    buwei: "全部部位",
    //部位彈出窗狀態
    buweiShowButtonStatus: false,

    //部位數據
    buweiilist: [
        { text: '全部部位', value: '全部部位' },
        { text: '腹部', value: '腹部' },
        { text: '心血管', value: '心血管' },
        { text: '胸部', value: '胸部' },
        { text: '骨关节', value: '骨关节' },
        { text: '肿瘤', value: '肿瘤' },
        { text: '神经', value: '神经' },
    ],
    //排序數據
    paixulist: [
        { text: '綜合排序', value: '綜合排序' },
        { text: '問診量', value: '問診量' },
    ],
    paixu: "主任",
    //排序彈窗狀態
    paixuShowButtonStatus: false,
    //医生列表
    doctorList:[] 

})

const {
    areaShowButtonStatus,
    area,
    buwei,
    buweiShowButtonStatus,
    buweiilist,
    paixulist,
    paixuShowButtonStatus,
    doctorList
} = toRefs(state)
console.log(areaList);

//搜索回調
function search() {

}
//地址確認回調
function confirmArea(selectedValues: string, selectedOptions: string) {
    console.log(selectedValues.selectedOptions[1].text);
    //@ts-ignore
    state.area = selectedValues.selectedOptions[1].text
    state.areaShowButtonStatus = false
    getDoctors(state.area,state.buwei)
}
//地址取消回調
function cancelArea() {
    state.areaShowButtonStatus = false
}
//排序確認回調
function ConfirmPaixu(selectedValues: string) {
    console.log(selectedValues);
    //@ts-ignore
    state.paixu = selectedValues.value
    state.paixuShowButtonStatus = false
}
//排序取消回調
function CancelPaixu() {
    state.paixuShowButtonStatus = false
}
//部位確認回調
function confirmKeshi(selectedValues: string) {
    //@ts-ignore
    console.log(selectedValues.selectedValues[0]);
    
    //@ts-ignore
    state.buwei = selectedValues.selectedValues[0]
    state.buweiShowButtonStatus = false
    getDoctors(state.area,state.buwei)
}
//部位取消回調
function cancelKeshi() {
    state.buweiShowButtonStatus = false
}
function onClickLeft(){
    history.go(-1)
}

function talkToDoctor(doctorName:string) {

  router.push({
    name:"talkPage",
    params:{
      doctorName
    }
  })

}

</script>
<template>
    <div class="main">
        <!-- <div class="top">
            <van-field v-model="searchValue" placeholder="请输入搜索关键词" style="width: 90%;padding-right: 0;" />
            <van-button type="primary" icon="search" size="small" @click="search" />
        </div> -->
        <van-nav-bar title="在綫咨詢" >
        </van-nav-bar>
        <div class="navbar">
            <div class="navbar-item" @click="areaShowButtonStatus = true">
                <p>选择地区:{{ area }}</p>
                <van-icon name="arrow-down" />
            </div>
            <div class="navbar-item" @click="buweiShowButtonStatus = true">
                <p>选择部位:{{ buwei }}</p>
                <van-icon name="arrow-down" />
            </div>
        </div>

        <van-empty description="未找到" v-if="doctorList.length<=0"/>
        <van-loading v-show="doctorList.length<=0"/>
        <div class="doctors">
            <div class="doctor" v-for="(item) in doctorList || []" @click="talkToDoctor(item.name)">
                <div class="avator">
                    <van-image round width="3rem" height="3rem"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>
                <div class="content" style="justify-content: space-around;">
                    <div class="title" style="display: flex;flex-direction: row;
                              justify-content: space-between;width: 240px;">
                        <h3>{{item.name}}</h3>
                        <span>{{item.role}}</span>
                        <van-tag type="success">三甲</van-tag>
                        <van-tag type="primary">可開方</van-tag>
                    </div>
                    <div class="introduce">
                        <p>{{item.info}}</p>
                    </div>
                    <div class="hpy" style="display: flex;width: 280px;">
                        <p>接診率</p>
                        <p style="color: #1989fa;">100%</p>

                    </div>
                    <div class="sp">
                        <p>{{item.hospital}}</p>
                    </div>
                </div>

            </div>
        </div>
        <van-popup v-model:show="buweiShowButtonStatus" position="bottom" :style="{ height: '30%' }">
            <van-picker title="选择部位" :columns="buweiilist" @confirm="confirmKeshi" @cancel="cancelKeshi" />
        </van-popup>
        <van-popup v-model:show="areaShowButtonStatus" position="bottom" :style="{ height: '30%' }">
            <van-area :area-list="areaList" @confirm="confirmArea" @cancel="cancelArea" :columns-num="2" />
        </van-popup>

        <van-popup v-model:show="paixuShowButtonStatus" position="bottom" :style="{ height: '30%' }">
            <van-picker title="選擇排序" :columns="paixulist" @confirm="ConfirmPaixu" @cancel="CancelPaixu" />
        </van-popup>

    </div>
</template>
<style scoped>
.main {
    width: 100%;
    height: 100%;
    padding: 10px;
}

.top {
    display: flex;
    align-items: center;
}

.navbar {
    padding: 5px;
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    color: #15141489;
    margin-top: 5px;
}

.navbar-item {
    display: flex;
    /* background-color: #f7f8fa; */
    padding: 8px;
    border-radius: 1ch;
    letter-spacing: 2px;
    font-size: 10px;
}

.doctors {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
}

.doctor {
    width: 100%;
    height: 150px;
    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
    padding: 10px;
    display: flex;
    flex-direction: row;

}

.doctor .avator {
    width: 48px;
    display: flex;
}

.doctor .content {
    flex-grow: 8;
    display: flex;
    flex-direction: column;
    padding-left: 5px;
}
</style>